<template>
  <div id="app">
    <div class="box">
      <!-- 搜索框 -->
      <div class="sousuokuang"><van-search v-model="value" show-action placeholder="520元礼包抢先领" @search="onSearch" @cancel="onCancel" /></div>

      <!-- tab栏 -->
      <van-row class="option" v-if="productList.length != 0">
        <van-col span="8" @click="multiple">综合</van-col>
        <van-col span="8">
          价格
          <span @click="sort" :class="this.num == 1 ? 'iconfont icon-shangjiantou' : 'iconfont icon-xiajiantou'"></span>
        </van-col>
        <van-col span="8" @click="Categoryarealert">分类</van-col>

        <!-- 分类 出的弹出框 -->
        <div class="Categoryarealert" v-if="fenleiflag" ref="CategoryarealertRef">
          <div v-for="item in productList.filterCategoryList" :key="item.id">{{ item.name }}</div>
        </div>
      </van-row>
    </div>
    <!-- 热门搜索 -->
    <div class="popular" v-if="productList.length == 0">
      <p>热门搜索</p>
      <div @click="Popular">520元礼包抢先领</div>
    </div>

    <!-- 搜索后得到的结果 盒子 -->
    <div class="content">
      <!-- 商品下面的字盒子    -->
      <div class="content-box" v-for="item in productList.list" :key="item.id" @click="goodsInfo(item)">
        <img :src="item.picUrl" alt="" />
        <p>{{ item.name }}</p>
        <span>￥{{ item.retailPrice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileSearch',

  data() {
    return {
      value: '',
      num: '',
      // 分类的状态
      fenleiflag: false,
      switch: false,
      // 商品的列表数据
      productList: []
    }
  },

  mounted() {},

  methods: {
    // for循环出来的商品事件
    goodsInfo(item) {
      // 跳转到商品详情页 并且把当前商品的 每一个item 项值传递过去
      this.$router.push({ path: '/goodsdetailspage', query: item })
    },
    // 键盘回车事件
    onSearch() {
      console.log('触发了回车')
      this.$get(this.$api.goodsList, {
        // keyword：关键字 把关键字传回
        keyword: this.value
      })
        .then(res => {
          // 获取返回值赋值数据
          this.productList = res.data.data
          console.log(this.productList)
        })
        .catch(err => {
          // 如果获取失败错误提示
          console.log(err)
        })
    },
    onCancel() {
      // 取消输入
      this.$router.push('/tabbar/home')
    },
    // 综合
    multiple() {
      this.onSearch()
    },
    home() {
      // 返回首页
      // this.$router.push('/home')
    },
    sort() {
      // 判断当前switch的状态
      if (this.switch) {
        // 改变switch的状态
        this.switch = false
        // 改变图标
        this.num = 2
        // 传回参数并重新获取数据
        this.$get(this.$api.goodsList, {
          keyword: this.value,
          sort: 'retail_price',
          order: 'desc'
        }).then(res => {
          this.productList = res.data.data
          console.log(res)
        })
      } else {
        this.num = 1
        this.switch = true
        this.$get(this.$api.goodsList, {
          keyword: this.value,
          sort: 'retail_price',
          order: 'asc'
        }).then(res => {
          this.productList = res.data.data
          console.log(res)
        })
      }
    },
    // 热门搜索
    Popular() {
      this.$get(this.$api.goodsList, {
        // keyword：关键字 把关键字传回
        keyword: '5'
      }).then(res => {
        // 获取返回值赋值数据 产品数据的
        this.productList = res.data.data
      })
    },
    // 分类弹出框
    Categoryarealert() {
      if (!this.fenleiflag) {
        this.fenleiflag = true
      } else {
        this.fenleiflag = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  max-height: calc(100vh - 0rem);
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
// 搜索框
.sousuokuang {
  width: 37.52rem;
}
.box {
  position: fixed;
  top: 0;
}
.option {
  background-color: #fff;
  text-align: center;

  .van-icon {
    font-size: 1.2rem;
  }
}

.van-icon {
  font-weight: 600;
  font-size: 2rem;
}
.popular {
  margin-top: 5rem;
  width: 100%;
  height: 3rem;
  p {
    margin-left: 1rem;
    font-size: 1.4rem;
  }
  div {
    width: 11rem;
    height: 2rem;
    margin-left: 1rem;
    font-size: 1.2rem;
    text-align: center;
    line-height: 2rem;
    border: #999999 0.1rem solid;
  }
}

.content {
  margin-top: 10rem;
  border-top: 0.1rem #e9eae9 solid;
  background: #e9eae9;
  .van-col {
    text-align: center;
    height: 5rem;
    line-height: 5rem;
    background: #fff;
    border-bottom: 0.1rem #e9eae9 solid;
  }
  .content-box {
    width: 49%;
    display: inline-block;
    background: #fff;
    text-align: center;
    margin: 0.5%;
    img {
      width: 100%;
    }
    span {
      color: #be6f70;
    }
    p {
      margin: 1rem 0;
      font-size: 1.4rem;
      /*强制文字一行内显示*/
      white-space: nowrap;
      /*溢出部分隐藏起来*/
      overflow: hidden;
      /*文本溢出时用省略号来显示*/
      text-overflow: ellipsis;
    }
  }
}

// 分类 出的弹出框
.Categoryarealert {
  border-top: #e9eae9 0.3rem solid;
  border-bottom: #e9eae9 0.1rem solid;
  background-color: #fff;
  display: flex;
  align-items: center;
  width: 100%;
  height: 6rem;
  display: flex;
  > div {
    width: 6.4rem;
    border: 0.3rem solid #999999;
    margin-left: 1rem;
  }
}
</style>
